<template>
    <div>
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="视频" name="first">
                    <my-video :theType="1" v-if="isUpdataFirst" />
                </el-tab-pane>
                <el-tab-pane label="文章" name="second">
                    <my-article :theType="1" v-if="isUpdataSecond" />
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>
import myVideo from "./components/video.vue";
import myArticle from "./components/article.vue";
export default {
    name: 'commonBase',
    data() {
        return {
            activeName: 'first',//根据用户的点击,会自动改变activeName的值
            // 给每个子组件绑定一个isUpdata属性，
            // 用来在点击切换的时候控制相应标签页组件是否重新渲染
            isUpdataFirst: true,
            isUpdataSecond: false
        }
    },
    components: {
        myVideo,
        myArticle
    },
    created() {
        
    },
    methods: {
        handleClick(tab, event) { //控制点击tab时，让子组件重新渲染
            if(this.activeName == 'first'){
                this.isUpdataFirst = true;
                this.isUpdataSecond = false;
            }
            else if(this.activeName == 'second'){
                this.isUpdataFirst = false;
                this.isUpdataSecond = true;
            }
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-tabs__item {
    font-size: 16px;
}
</style>
